<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<html>

<!-- page heading start-->
<div class="page-heading">
    <h3>
        Form Validation
    </h3>
    <ul class="breadcrumb">
        <li>
            <a href="#">Form</a>
        </li>
        <li class="active"> Form Validation </li>
    </ul>
</div>
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <section class="panel">
                <header class="panel-heading">
                    Basic validations
                </header>
                <div class="panel-body">
                    <form role="form" class="form-horizontal adminex-form">
                        <%--                        action="/teacher/addTeacher" method="post"--%>
                        <div class="form-group has-success">
                            <label class="col-lg-2 control-label">教师姓名</label>
                            <div class="col-lg-10">
                                <input type="text" placeholder="" id="name" class="form-control"
                                       name="name" value="${teacher.name}">
                                <p class="help-block">E.g. 张三、李四</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">教师简介</label>
                            <div class="col-lg-10">
                                <input type="text" placeholder="" id="intro" class="form-control" name="intro" value="${teacher.intro}">
                                <p class="help-block">E.g. 性格开朗,活泼向上</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">教师资历</label>
                            <div class="col-lg-10">
                                <input type="text" placeholder="" id="career" class="form-control"
                                       name="career" value="${teacher.career}">
                                <p class="help-block">E.g. 清华大学毕业学士,曾经获得过互联网+银奖,在教育行业有非常大的热情</p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 control-label">教师等级</label>
                            <div class="col-lg-10">
                                <select name="level" id="level" class="form-control">
                                    <option value="1" <c:if test="${teacher.level} == 1">selected</c:if>>初级教师</option>
                                    <option value="2" <c:if test="${requestScope.teacher.level} == 1">selected</c:if>>高级教师</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 control-label">教师排序</label>
                            <div class="col-lg-10">
                                <select name="sort" id="sort" class="form-control">
                                    <option value="1" >在前插入</option>
                                    <option value="2" class="form-control">在后插入</option>
                                </select>
                            </div>
                        </div>

                        <%--                        TODO 头像组件--%>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">教师头像</label>
                            <div class="col-lg-10">
                                <a class="pull-left" href="javascript:void(0)">
                                    <img id="image" class="thumb media-object" src="${teacher.avatar}" onclick="addfile()" alt="">
                                </a>
                                <input id="imgInput" type="file" class="" name="" style="display: none"/>
                                <input id="imgId" type="text" class="" name="avatar" style="display: none"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-lg-offset-2 col-lg-10">
                                <button class="btn btn-primary" type="button" onclick="updateTeacher()">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
    </div>
</div>
<!--body wrapper end-->
<script>
    //选择文件后更改图片
    $("#imgInput").change(function(){
        console.log(URL.createObjectURL($(this)[0].files[0]))
        $("#image").attr("src",URL.createObjectURL($(this)[0].files[0]));
    });

    //点击图片使用隐藏的filebutton打开文件选择器
    function addfile(){
        $('#imgInput').click()
    }

    function updateTeacher(){
        // var file = $('#imgInput')[0].files[0];
        // console.log(file)
        //虽然输出
        var formData = new FormData();
        formData.append("file",$('#imgInput')[0].files[0]);
        console.log(formData)
        $.ajax({
            type: "post",
            url:'/oss/upload',
            data: formData,
            contentType: false,
            processData: false,
            success: function(data) {
                //接收后端返回的url地址
                if(data){
                    //将隐藏avatar文本框的属性赋值为oss的图片上传地址
                    $('#imgId').val(data)
                }
                $.ajax({
                    type:"post",
                    url: '/teacher/updateTeacher',
                    data:{
                        name: $("#name").val(),
                        intro: $("#intro").val(),
                        career: $("#career").val(),
                        level: $("#level").val(),
                        avatar: $("#imgId").val(),
                        sort: $("#sort").val(),
                    },
                    success: function () {
                        toastr.success("教师修改成功!")
                        setTimeout(function (){
                            window.location.href='/teacher/list'
                        },1000)
                    },
                    error: function () {
                        toastr.error("教师修改失败!")
                        setTimeout(function (){
                            window.location.href='/teacher/save'
                        },1000)
                    },
                })
            }
        });


    }
</script>
</html>
